@charset "utf-8";
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}
html,body{
    width: 100%;
    height: 100%;
}
//预加载
.loading{
    width: 100%;
    height: 100%;
    background: #FFBC3B;
    position: relative;
    overflow: hidden;
    >ul{
        width: 100%;
        margin: 0 auto;
        position: absolute;
        top: 43%;
        left: 50%;
        transform: translate(-50%);
        display: flex;
        justify-content:space-around;
        align-items: center;
        >.Img{
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: r(82);
            height: r(94);
              img{
                  width: 100%;
              }  
        }
        >li{
            
            width: r(18);
            height: r(18);
            border-radius: 50%;
            background: #fff;
            margin: 0 r(10);
        }
    }
    .loadNum{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%);
        font-size: r(60);
        color:#fff;
    }
}



//首页
.indexWrap{
    width:100%;
    height: 100%;
    overflow: hidden;
    font-size: 0;
    position: relative;
    display: none;
    background: #FFBC3B;
    >img{
        width: 100%;   
    }
    .logo{
        position: absolute;
        width: r(153);
        height: r(83);
        top: r(133);
        left: r(37);
        >img{
            width: 100%;   
        }
    }
    .music{
        position: absolute;
        top: r(30);
        right: r(20);
        width: r(50);
        height: r(50);
        img{
            width: 100%;
        }
    }
    .fanImg{
        position: absolute;
        top: r(130);
        left:50%;
        transform: translateX(-50%);
        width: 100%;
        height: r(564);
        z-index: 0;
        >img{
            width: 100%;
        }
        .tit{
            position: absolute;
            top:r(50);
            left:50%;
            transform: translateX(-50%);
            width: r(472);
            height: r(282);
            img{
                width: 100%;
            }
        }
    }
    .playBtn{
        position: absolute;
        top:r(640);
        left: r(35);
        width: r(161);
        height: r(96);
        z-index: 1;
        img{
            width: 100%;
        }
    }
    .nameList{
        position: absolute;
        top:r(780);
        left:r(26);
        width: r(197);
        height: r(65);
        img{
            width: 100%;
        }
    }
    .rule{
        position: absolute;
        top: r(880);
        left: r(26);
        width: r(200);
        height: r(68);
        z-index: 2;
        img{
            width: 100%;
        }
    }
    .pson_header{
        position: absolute;
        top:r(460);
        left:r(170);
        width: r(260);
        height: r(298);
        z-index: 1;
        img{
            width: 100%;
        }
    }
    .pson_body{
        width: r(341);
        height: r(419);
        position:absolute;
        top: r(690);
        left: r(134);  
        img{
            width: 100%;
        }      
    }
}
.musicAn{
    animation:musicA 2s infinite linear;
}
@keyframes musicA {
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}


//获奖名单
.rank_wrap{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 110;
}
.rank_img{
    width: r(578);
    height: r(730);
    position: absolute;
    top: 50%;
    left: r(10);
    transform: translateY(-50%);
    img{
        width: 100%;
    }
    .close{
        z-index: 111;
        width: r(51);
        height: r(61);
        position: absolute;
        top: r(26);
        right:r(24);
    }
    .list{
        width: r(370);
        height:100%;
        position: absolute;
        top:r(110);
        left:r(70);
        overflow: hidden;
        .listCon{
            font-size: r(22);
            height: 100%;
            overflow-y:scroll;
            ul{
              width: r(345);
              height: r(80);
              li{
                  width: r(342);
//                height:100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  color: #795949;
                  .left{
                      width: r(200);
                      display: flex;
                      justify-content:space-between;
                      align-items: center;
                      img{
                          width: r(55);
                      }
                  }
              }
            }
        }
    }
}



//游戏规则
.ruleWrap{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index:15;
}
.ruleImg{
    width: r(578);
    height: r(730);
    position: absolute;
    top: 50%;
    left: r(10);
    transform: translateY(-50%);
    img{
        width: 100%;
    }
    .close{
        z-index: 6;
        width: r(51);
        height: r(61);
        position: absolute;
        top: r(26);
        right:r(24);
    }
    .rank_btn{
        z-index: 6;
        width: r(51);
        height: r(100);
        position: absolute;
        top: r(416);
        right:r(24);
    }
    .go{
        z-index: 6;
        width: r(61);
        height: r(100);
        position: absolute;
        top: r(580);
        right:r(20);
    }
    .rulecon{
        position: absolute;
        top: r(93);
        left:r(68);       
        width: r(418);
        height: r(630);
        z-index: 7;
        overflow: hidden;
        .ruleImg{
//          margin-top: r(50);
            width: r(372);
            overflow-y: scroll;
            height: 100%;
            img{
                width: 100%;
            }
        }
    }
}




@media only screen and (max-height:668px){
    .indexWrap{
        width:100%;
        height: 100%;
        overflow: hidden;
        font-size: 0;
        position: relative;
        display: none;
        background: #FFBC3B;
        >img{
            width: 100%;   
        }
        .logo{
            position: absolute;
            width: r(153);
            height: r(83);
            top: 0.325rem;
            left: r(37);
            >img{
                width: 100%;   
            }
        }
        .fanImg{
            position: absolute;
            top: 0.25rem;
            left:50%;
            transform: translateX(-50%);
            width: 100%;
            height: r(564);
            z-index: 0;
            >img{
                width: 100%;
            }
            .tit{
                position: absolute;
                top:r(50);
                left:50%;
                transform: translateX(-50%);
                width: r(472);
                height: r(282);
                img{
                    width: 100%;
                }
            }
        }
        .playBtn{
            position: absolute;
            top:14rem;
            left: r(35);
            width: r(161);
            height: r(96);
            z-index: 1;
            img{
                width: 100%;
            }
        }
        .nameList{
            position: absolute;
            top:17rem;
            left:r(26);
            width: r(197);
            height: r(65);
            img{
                width: 100%;
            }
        }
        .rule{
            position: absolute;
            top: 19rem;
            left: r(26);
            width: r(200);
            height: r(68);
            z-index: 2;
            img{
                width: 100%;
            }
        }
        .pson_header{
            position: absolute;
            top:9.5rem;
            left:r(170);
            width: r(260);
            height: r(298);
            z-index: 1;
            img{
                width: 100%;
            }
        }
        .pson_body{
            width: r(341);
            height: r(419);
            position:absolute;
            top: 15.25rem;
            left: r(134);  
            img{
                width: 100%;
            }      
        }
    }
}